<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>Super-TEAM游戏推荐网</title>
	{% load static %}
	<meta charset="UTF-8">
	<meta name="description" content="EndGam Gaming Magazine Template">
	<meta name="keywords" content="endGam,gGaming, magazine, html">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Favicon -->
	<link href="/static/img/logo.jpg" rel="shortcut icon"/>

	<!-- Google Font -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

	<!-- Stylesheets -->
	<link rel="stylesheet" href="{%static 'css/bootstrap.min.css' %}"/>
	<link rel="stylesheet" href="{%static 'css/font-awesome.min.css' %}"/>
	<link rel="stylesheet" href="{%static 'css/slicknav.min.css' %}"/>
	<link rel="stylesheet" href="{%static 'css/owl.carousel.min.css' %}"/>
	<link rel="stylesheet" href="{%static 'css/magnific-popup.css' %}"/>
	<link rel="stylesheet" href="{%static 'css/animate.css' %}"/>
	<!-- Main Stylesheets -->
	<link rel="stylesheet" href="{%static 'css/style.css' %}"/>

	<!--引入弹窗swal的CSS和js-->
    <link rel="stylesheet" href="{%static 'css/sweetalert.css' %}">
    <script src="{%static 'js/sweetalert-dev.js' %}"></script>

	<script src="{%static 'js/jquery-3.4.1.js' %}"></script>
    <script src="{%static 'js/jquery.cookie.js' %}"></script>
	<script src="{% static 'js/change-info.js' %}"></script>

	<style type="text/css">
		p {	color: white;}
		a:link { color: #eee; text-decoration: none; }/* 未访问的链接 */
		a:visited { color: #fff; text-decoration: line-through; } /* 已访问的链接 */
		a:hover { color: #fff; text-decoration: underline; }/* 鼠标移动到链接上 */
		a:active { color: #F00; } /* 选定的链接 */
		.games-section {padding: 150px 0;}
		.game-single-content h2{color: #b01ba5;margin-bottom: 20px;}
		.game-single-content p {font-size: 16px;font-weight: 500;color: #68647d;line-height: 1.8;margin-bottom: 70px;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 3;}
		.blog-filter {float: right;}
		/*右上角样式*/
		/*.user-panel {margin-top: -20px;width: 150px;}*/
		.user-panel button {background-color: #081624;color: #fff;border: none;outline: none;}
		.user-panel button:hover {color: #b01ba5;}
		.close {display: inline-block;width: 30px;height: 4px;background: #333;transform: rotate(45deg);}
		.close::after {content: '';display: block;width: 30px;height: 4px;background: #000000;transform: rotate(-90deg);}
		input::-webkit-input-placeholder {color: #666666;font-size: 12px;}

		/*模态框样式*/
		.modal-content{background-color:#fff;border: none}
        html {font-size: 10px;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
        .layout {width: 100%;}
        .layout：after{content: " ";display: block;height: 0;clear: both;visibility: hidden;overflow: hidden;}
        .tonav{background: #061f41;url()center no-repeat;background-size: 100% auto;}
        .tonav .pos-tl {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);}
        .tonav nav{padding-top: 20px;padding-bottom: 20px;}
        .login_in .wrap{background-color: #fff;padding: 30px;}
        .login_in .wrap .title{color: #061f41;padding: 10px 0;border-bottom: 1px solid #bfbfbf;position: relative;font-size: 2.5rem;}
        .login_in .wrap .title:after{content: "";bottom: 0;left: 0;width: 150px;height: 2px;background-color: #061f41;}
        .login_in .wrap .title span{display: inline-block;width: 150px;text-align: center;}
        .login_in .wrap .item{width: 305px;height: 41px;margin: 1px 0 15px 0;background-color: #FFF;border: 1px solid #BFBFBF;}
        .login_in .wrap .item .ico{font-size: 1.6rem;color: #BFBFBF;padding: 0 8px;}
        .login_in .wrap input[type="text"], .login_in .wrap input[type="password"]{font-size: 1.4rem;border: none;width: 263px;height: 38px;background-color: #FFF;outline: none;}
        .login_in .wrap .item-submit{text-align: center;}
        .login_in .wrap input[type="submit"]{border: none;color: #fff;background-color: #061f41;padding: 10px 0;font-size: 1.8rem;width: 305px;}
        .login_in .wrap .dl_zidong{text-align: right;margin-bottom: 20px;vertical-align: middle;}
        .login_in .wrap .dl_zidong input {width: 16px;height: 16px;vertical-align: middle;}
        .login_in .wrap .dl_zidong span{vertical-align: middle;}
        .login_in .wrap .dl_title{display: flex;justify-content: space-between;padding-top: 10px;}
        .login_in .wrap .dl_if{color: #0b0b0b;cursor: pointer;}
        .login_in .wrap .dl_forget{color: #adb5bd;cursor: pointer;}
		/*评论框样式*/
		.container1{position: relative;width: 350px;background-color: #34164B;}
		.container1 textarea{color: #FFFFFF;width: 350px;border:0;border-radius:5px;background-color: #68647d;padding: 10px;font-size: 15px;margin-left: 12px}
		.container1 input{position: absolute;top: 7px;right: 0;background-color: #68647d;border: none;outline: none;border-radius: 6px;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s;font-size: 15px;width: 80px;}
		.container1 input:hover {background-color: darkred;color: white;}

	</style>

</head>
<body>
	<!-- Page Preloder -->
	<div id="preloder">
		<div class="loader"></div>
	</div>

	<!-- Header section -->
	<header class="header-section">
		<div class="header-warp">
			<div class="header-bar-warp d-flex">
				<!-- site logo -->
				<a href="/" class="site-logo">
					<img src="../static/img/Logo-ST.png" height="29.5" alt="">
				</a>
				<nav class="top-nav-area w-100">
					{% if isLogin == False %}
					<div class="user-panel" style="display: block" id="login_register">
						<button data-toggle="modal" data-target="#login" data-backdrop="static">登录</button> /
						<button data-toggle="modal" data-target="#register" data-backdrop="static">注册</button>
					</div>
					{% else %}
					<!--通过session获取登录信息-->
					<div class="user-panel">
						<button data-toggle="modal" data-target="#profile" data-backdrop="static">个人信息</button> /
						<button onclick="window.location.href='/logout'">退出</button>
					</div>
					{% endif %}
					<!-- Menu -->
					<ul class="main-menu primary-menu">
						<li><a href="/">首页</a></li>
						<li><a href="/discover">发现</a></li>
						<li><a href="/ranklist">排行榜</a></li>
						<li><a href="/about">关于我们</a></li>
					</ul>
				</nav>
			</div>
		</div>
	</header>
	<!-- Header section end -->


	<!-- Games section -->
	<section class="games-section">
		<div class="container">
			<div class="row">
				<div class="col-xl-8 col-lg-8 col-md-8 game-single-content">
					{% for game in games %}
					<img src={{game.picture}} width="800px">
					<div class="section-title text-white">
						<h2>{{game.name}}</h2>
					</div>
					<p style="color: white ">{{game.describe}}</p>
					<div class="section-title text-white">
						<h2>游戏标签</h2>
					</div>
					{% endfor %}
					<ul class="blog-filter">
						{% for gametag in gametags %}
						<li><a href="/discover/?tag={{gametag.tag}}">{{gametag.tag}}</a></li>
						{% endfor%}
					</ul>
				</div>

			<div class="col-xl-3 col-lg-4 col-md-5 sidebar game-page-sideber">
				<div id="stickySidebar-2">
					{% for game in games %}
					<div class="widget-item">
						<div class="rating-widget">
							<ul>
								<li>价格<p>{{game.price}}</p></li>
								<li>发行日期<p>{{game.IssuingDate}}</p></li>
								<li>开发商<p>{{game.developers}}</p></li>
								<li>总体评价<p>{{game.assessment}}</p></li>
								<li>评价情况<p>{{game.FavorableComments}}</p></li>
							</ul>
							<div class="rating">
								<h5><i>评分</i><span>{{game.grade}}</span> / 5</h5>
							</div>
						</div>
					</div>
					{% endfor %}					
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- Games end-->


	<!-- Review section -->
	<section class="review-section">
		<div class="container">
			<div class="section-title text-white">
				<h2>有价值的评价</h2>
			</div>
			<br/><br/>

			<div class="row">
				<div class="col-xl-8 col-lg-8 col-md-8 game-single-content">
					{% for gamecomment in gamecomments_list %}
					<div class="widget-item">
						<div class="rating-widget" style="padding: 10px 30px;">
							{% if gamecomment.gob == 'g' %}
							<img src="/static/img/up.png" style="">
							<span style="color: #FFFFFF;font-size: 20px;"> 推荐 </span>
							{% elif gamecomment.gob == 'b'%}
							<img src="/static/img/down.png" style="">
							<span style="color: #FFFFFF;font-size: 20px;"> 不推荐 </span>
							{% endif %}
							<p style="color: white ">
								{{gamecomment.comment}}
							</p>
						</div>
					</div>
					{% endfor %}
					<div class="site-pagination">
						{% if is_paginated %}
						<ul class="pagination pull-right">
							{% endif %}
							{#上一页按钮开始#}
							{# 如果当前页有上一页#}
							{% if gamecomments_list.has_previous %}
							{#  当前页的上一页按钮正常使用#}
							<li class="previous" style="list-style: none"><a href="?id={{gameid}}&page={{gamecomments_list.previous_page_number}}" style="width: auto">上一页</a></li>
							{% else %}
							{# 当前页的不存在上一页时,上一页的按钮不可用#}
							<li class="previous disabled" style="list-style: none"><a href="#" style="width: auto">上一页</a></li>
							{% endif %}
							{#上一页按钮结束#}
							{% if data.first %}
							<li class="page" style="list-style: none"><a href="?id={{gameid}}&page=1">1</a></li>
							{% endif %}
							{% if data.left %}
							{% if data.left_has_more %}
							<li class="page" style="list-style: none"><a href="javascript:void(0)">...</a></li>
							{% endif %}
							{% for i in data.left %}
							<li class="page" style="list-style: none"><a href="?id={{gameid}}&page={{ i }}">{{ i }}</a></li>
							{% endfor %}
							{% endif %}
							<li class="page active" style="list-style: none"><a href="javascript:void(0)"> {{ page_num }}</a></li>
							{% if data.right %}
							{% for i in data.right %}
							<li class="page"style="list-style: none"><a href="?id={{gameid}}&page={{ i }}">{{ i }}</a></li>
							{% endfor %}
							{% if data.right_has_more %}
							<li class="page" style="list-style: none"><a href="javascript:void(0)">...</a></li>
							{% endif %}
							{% endif %}
							{% if data.last %}
							<li class="page" style="list-style: none"><a href="?id={{gameid}}&page={{ paginator.num_pages }}">{{ paginator.num_pages }}</a></li>
							{% endif %}
							{% if gamecomments_list.has_next %}
							<li class="next" style="list-style: none"><a href="?id={{gameid}}&page={{gamecomments_list.next_page_number}}" style="width: auto">下一页</a></li>
							<!--							<li class="next"><a href="?page={{ games11_list.next_page_number }}" style="width: auto">下一页</a></li>-->
							{% else %}
							<li class="next disabled" style="list-style: none"><a href="#" style="width: auto">下一页</a></li>
							{% endif %}
							{# 下一页按钮结束#}
						</ul>
					</div>
				</div>
				<div class="col-xl-3 col-lg-4 col-md-5 sidebar game-page-sideber">
					<div id="stickySidebar">
						<div class="widget-item">
							<div class="categories-widget" style="width: 400px;">
								<h4 class="widget-title">评论</h4>
								<div class="col-lg-10" style="margin-bottom: 50px">
									<div class="container1">
										<textarea id="comment_content" placeholder="请输入评论内容"></textarea>
									</div>
									<div class="container1">
										<input type="button" id="comment_submit" value="提交评论" class="btn btn-primary">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</section>
	<!-- Review section end-->


	<!-- Footer section -->
	<footer class="footer-section">
		<div class="container">
			<div class="footer-left-pic">
				<img src="/static/img/footer-left-pic.png" alt="">
			</div>
			<div class="footer-right-pic">
				<img src="/static/img/footer-right-pic.png" alt="">
			</div>
			<a href="#" class="footer-logo">
				<img src="/static/img/Logo-ST.png" width="500px"  alt="">
			</a>
			<ul class="main-menu footer-menu">
                <li><a href="/">首页</a></li>
				<li><a href="/discover">发现</a></li>
				<li><a href="/ranklist">排行榜</a></li>
				<li><a href="/about">关于我们</a></li>
			</ul>
			<div class="footer-social d-flex justify-content-center">
				<a href="#"><i class="fa fa-weixin"></i></a>
				<a href="#"><i class="fa fa-qq"></i></a>
			</div>
			<div class="copyright"><a href="">Super-TEAM</a> 2022 @ All rights reserved</div>
		</div>
	</footer>
	<!-- Footer section end -->

	<!--====== Javascripts & Jquery ======-->
	<script src="../static/js/jquery-3.2.1.min.js"></script>
	<script src="../static/js/bootstrap.min.js"></script>
	<script src="../static/js/jquery.slicknav.min.js"></script>
	<script src="../static/js/owl.carousel.min.js"></script>
	<script src="../static/js/jquery.sticky-sidebar.min.js"></script>
	<script src="../static/js/jquery.magnific-popup.min.js"></script>
	<script src="../static/js/main.js"></script>


	<!--弹出登录窗口-->
	<div id="login" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">

				<div class="layout tonav pos-r">
        			<div class="login_in pos-tl">
        			    <div class="wrap">
							<div class="modal-body">
								<span class="close" data-dismiss="modal"></span>
							</div>
        			        <center><p class="pd-bottom title">登录系统</p></center>
							<form class="form-group" >
<!--								{%csrf_token%}   &lt;!&ndash;csrf验证&ndash;&gt;-->
								<div class="item">
									<span class="ico i-user"></span>
									<input type="text" name="phone" id="phone_login"  value="{{phone}}" placeholder="请输入手机号码" required="required" minlength="11" oninput="if(value.length>11)value=value.slice(0,11)">
								</div>
								<div class="item">
									<span class="ico i-unlock-alt"></span>
									<input type="password" name="password" id="password_login" value="{{password}}" placeholder="请输入登录密码" required="required" />
									<span class="glyphicon glyphicon-eye-open" onclick="change(document.getElementById('password_login'))">⊙</span>
								</div><br/>
								<div class="item-submit">
									<input class="btn btn-primary" type="button" onclick="login_form()" value="登 录" style="font-size: 15px;width: 80px;"/>
								</div>
								<br/>
								<div class="dl_title">
									<a data-toggle="modal" data-target="#register" data-backdrop="static" class="dl_if">注册新用户</a>
									<a data-toggle="modal" data-target="#forget" data-backdrop="static" class="dl_forget">忘记密码？</a>
								</div>
							</form>
        			    </div>
        			</div>
   	 			</div>

			</div>
		</div>
	</div>
	<!--登录窗口结束-->


	<!--弹出注册窗口-->
	<div id="register" class="modal fade">
		<div class="modal-dialog" >
			<div class="modal-content">

				<div class="layout tonav pos-r">
					<div class="login_in pos-tl">
						<div class="wrap">
							<div class="modal-body">
								<span class="close" data-dismiss="modal"></span>
							</div>
							<center><p class="pd-bottom title"><span>注册系统</span></p></center>

							<form class="form-group" >
<!--								{%csrf_token%}-->
								<div class="item">
									<span class="ico i-user"></span>
									<input type="text" id="name_register" placeholder="请输入用户名" required="required">
								</div>
								<div class="item">
									<span class="ico i-user"></span>
									<input type="text" id="phone_register" placeholder="请输入手机号码" required="required" minlength="11" oninput="if(value.length>11)value=value.slice(0,11)" onblur="checkphone()">
								</div>
								<div class="item">
									<span class="ico i-user"></span>
									<input type="text" id="age_register" placeholder="请输入年龄" required="required">
								</div>
								<div>
									<span style="display:inline-block;font-size: medium;color: black">请选择性别：</span>
									<select name="gender" id="gender" style="width:80px;height:28px">
										<option value="1">男</option>
										<option value="2">女</option>
									</select>
								</div><br/>
								<div>
									<span style="display:inline-block;font-size: medium;">请选择职业：</span>
									<select name="profession" id="profession" style="width:80px;height:28px">
										<option value="1">学生</option>
										<option value="2">老师</option>
										<option value="3">程序员</option>
										<option value="4">项目经理</option>
										<option value="5">其他</option>
									</select>
								</div><br/>
								<div class="item">
									<span class="ico i-unlock-alt"></span>
									<input type="password" name="password" id="password1_register" placeholder="请输入密码" required="required">
									<span class="glyphicon glyphicon-eye-open" onclick="change(document.getElementById('password1_register'))">⊙</span>
								</div>
								<div class="item">
									<span class="ico i-unlock-alt"></span>
									<input type="password" name="password" id="password2_register" placeholder="再次输入密码" required="required">
									<span class="glyphicon glyphicon-eye-open" onclick="change(document.getElementById('password2_register'))">⊙</span>
								</div><br/>
								<div class="item-submit">
									<input class="btn btn-primary" type="button" onclick="register_form()" value="注 册" style="font-size: 15px;width: 80px;"/>
								</div>
							</form>

						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
	<!--注册窗口结束-->


    <!--忘记密码窗口-->
	<div id="forget" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">

				<div class="layout tonav pos-r">
					<div class="login_in pos-tl">
						<div class="wrap">
							<div class="modal-body">
								<span class="close" data-dismiss="modal"></span>
							</div>
							<center><p class="pd-bottom title">忘记密码</p></center>
							<form class="form-group" >
<!--								{%csrf_token%}   &lt;!&ndash;csrf验证&ndash;&gt;-->
								<div class="item">
									<span class="ico i-user"></span>
									<input type="text" name="phone" id="phone_forget" value="" placeholder="请输入手机号码" required="required" minlength="11" oninput="if(value.length>11)value=value.slice(0,11)">
								</div>
								<div class="item">
									<span class="ico i-unlock-alt"></span>
									<input type="password" name="password" id="password_forget" value="" placeholder="请输入密码" required="required" />
									<span class="glyphicon glyphicon-eye-open" onclick="change(document.getElementById('password_forget'))">⊙</span>
								</div><br/>
								<div class="item-submit">
									<input class="btn btn-primary" type="button" onclick="forget_form()" value="修  改" style="font-size: 15px;width: 80px;"/>
								</div>
							</form>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
	<!--忘记密码窗口结束-->


	<!--个人信息窗口-->
	<div id="profile" class="modal fade">
		<div class="modal-dialog" >
			<div class="modal-content">

				<div class="layout tonav pos-r">
					<div class="login_in pos-tl">
						<div class="wrap">
							<div class="modal-body">
								<span class="close" data-dismiss="modal"></span>
							</div>
							{% if isLogin == True %}
							<center><p class="pd-bottom title"><span>修改个人信息</span></p></center>
							<form class="form-group" >
<!--								{%csrf_token%}-->
								用户名：
								<div class="item">
									<span class="ico i-user"></span>
									<input type="text" id="name_change" value={{name}}>
								</div>
								手机号：
								<div class="item">
									<span class="ico i-user"></span>
									<input type="text" id="phone_change" value={{phone}} readonly>
								</div>
								年龄：
								<div class="item">
									<span class="ico i-user"></span>
									<input type="text" id="age_change" value={{age}}>
								</div>
								<div>
									<span style="display:inline-block;color: black">性别：</span>
									<select name="gender" id="gender_change" style="width:80px;height:30px">
										{% if gender == '男' %}
										<option value="1" selected>男</option>
										<option value="2">女</option>
										{% else %}
										<option value="1">男</option>
										<option value="2" selected>女</option>
										{% endif %}
									</select>
									<span style="display:inline-block;">职业：</span>
									<select name="profession" id="profession_change" style="width:80px;height:30px">
										<option value="1">学生</option>
										<option value="2">老师</option>
										<option value="3">程序员</option>
										<option value="4">项目经理</option>
										<option value="5">其他</option>
									</select>
								</div><br/>
								密码：
								<div class="item">
									<span class="ico i-unlock-alt"></span>
									<input type="password" id="password_change" name="password" value={{password}}>
									<span class="glyphicon glyphicon-eye-open" onclick="change(document.getElementById('password_change'))">⊙</span>
								</div><br/>
								<div class="item-submit">
									<input class="btn btn-primary" type="button" value="修 改" onclick="profile_form()" style="font-size: 15px;width: 80px;"/>
								</div>
							</form>
							{% endif %}
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
	<!--个人信息窗口结束-->

	<script>
	//将模态框定位到屏幕正中间
		$('#login').on('shown.bs.modal', function (e) {
			// 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
			$(this).css('display', 'block');
			var modalHeight = $(window).height() / 2 - $('#login .modal-dialog').height() / 2;
			$(this).find('.modal-dialog').css({
				'margin-top': modalHeight
			});
		});

		$('#register').on('shown.bs.modal', function (e) {
            // 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
            $(this).css('display', 'block');
            var modalHeight=$(window).height() / 2 - $('#register .modal-dialog').height() / 2;
            $(this).find('.modal-dialog').css({
                'margin-top': modalHeight
            });
        });

		$('#forget').on('shown.bs.modal', function (e) {
			// 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
			$(this).css('display', 'block');
			var modalHeight = $(window).height() / 2 - $('#forget .modal-dialog').height() / 2;
			$(this).find('.modal-dialog').css({
				'margin-top': modalHeight
			});
		});

		$('#profile').on('shown.bs.modal', function (e) {
			// 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
			$(this).css('display', 'block');
			var modalHeight = $(window).height() / 2 - $('#profile .modal-dialog').height() / 2;
			$(this).find('.modal-dialog').css({
				'margin-top': modalHeight
			});
		});

		var searchStr = location.search;
		//由于searchStr属性值包括“?”，所以除去该字符
		searchStr = searchStr.substr(1);
		//将searchStr字符串分割成数组，数组中的每一个元素为一个参数和参数值
		var searchs = searchStr.split("&");
		//获得第一个参数和值
		var address = searchs[0].split("=");
		var id=address[1]
		$("#comment_submit").click(function (){
			$.ajax({
				url:"/gameSingle/comment_control",
				data:{
					"comment": $("#comment_content").val(),
				    "id":id
				},
				type:"POST",
				success:function (data){
					var data1=JSON.parse(data);
					swal("评论成功！")
					if(data1["flag"]) {
						$("#comment_content").val("")   // 提交完成后，清空评论输入框的内容
						location.reload()
					}
					else{
						swal(data1["error_msg"])
					}
				}
			})
		})

		//  回复按钮的点击事件
		$(".reply").click(function (){
			$("#comment_content").focus()      // 回复按钮的事件，点击时，将光标聚集到评论输入框中
			var val = "@" + $(this).attr("username") + "\n"    // $(this)指代".reply"标签本身，获取这个标签的username值 #}
			$("#comment_content").val(val)     // 回复时，自动在输入框加入：@要回复的人 #}
			pid = $(this).attr("pk")            // 当点击回复时，父评论ID不再为空，此时修改为：对应评论的主键值ID #}
		})
		//code from http://caibaojian.com/textarea-autoheight.html
		function makeExpandingArea(el) {
			var timer = null;
			//由于ie8有溢出堆栈问题，故调整了这里
			var setStyle = function(el, auto) {
				if (auto) el.style.height = 'auto';
				el.style.height = el.scrollHeight + 'px';
			}
			var delayedResize = function(el) {
				if (timer) {
					clearTimeout(timer);
					timer = null;
				}
				timer = setTimeout(function() {
					setStyle(el)
				}, 200);
			}
			if (el.addEventListener) {
				el.addEventListener('input', function() {
					setStyle(el, 1);
				}, false);
				setStyle(el)
			} else if (el.attachEvent) {
				el.attachEvent('onpropertychange', function() {
					setStyle(el)
				})
				setStyle(el)
			}
			if (window.VBArray && window.addEventListener) { //IE9
				el.attachEvent("onkeydown", function() {
					var key = window.event.keyCode;
					if (key == 8 || key == 46) delayedResize(el);

				});
				el.attachEvent("oncut", function() {
					delayedResize(el);
				}); //处理粘贴
			}
		}

		var textarea = document.getElementById('comment_content');
		makeExpandingArea(textarea);
	</script>
	</body>
</html>
